<script setup>
import { computed, onMounted, ref, watch } from "vue";
import { inject } from "vue";

const axios = inject("axios");
const emit = defineEmits(["toPageNum"]);

const props = defineProps({
    total: {
        type: Number,
        required: true,
    },
    currentPage: {
        type: Number,
        default: 1,
    },
    pageSize: {
        type: Number,
        default: 9,
    },
    prevText: {
        type: String,
        default: "上一页",
    },
    nextText: {
        type: String,
        default: "下一页",
    },
});

// 响应式变量
const defaultOffsetSize = 10; // 默认是10个页码为一次分页
const blogs = ref([]);
const currentPageRef = ref(props.currentPage);
const totalPage = computed(() => Math.ceil(props.total / props.pageSize));
const currentOffset = computed(() =>
    Math.floor((currentPageRef.value - 1) / defaultOffsetSize),
);

// 动态计算显示的页码数量
const tempPageNumbers = computed(() => {
    const start = currentOffset.value * defaultOffsetSize + 1;
    const end = Math.min(start + defaultOffsetSize - 1, totalPage.value);
    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
});

// 监听 props 的变化以更新 currentPageRef
watch(
    () => props.currentPage,
    (newVal) => {
        currentPageRef.value = newVal;
    },
    { immediate: true },
);

// 初始化逻辑,加载时候执行
onMounted(() => {
    console.log("Pagination>>>>>>>>>>>>>>>>>>>>>" + props.total);
    //updateBlogList();
});

function firstPage() {
    if (currentPageRef.value !== 1) {
        currentPageRef.value = 1;
        emit("toPageNum", currentPageRef.value);
    }
}

function previewPage() {
    if (currentPageRef.value > 1) {
        currentPageRef.value--;
        emit("toPageNum", currentPageRef.value);
    }
}

function lastPage() {
    if (currentPageRef.value < totalPage.value) {
        currentPageRef.value = totalPage.value;
        emit("toPageNum", currentPageRef.value);
    }
}

function nextPage() {
    if (currentPageRef.value < totalPage.value) {
        currentPageRef.value++;
        emit("toPageNum", currentPageRef.value);
    }
}

function toPage(pageNumber) {
    if (pageNumber >= 1 && pageNumber <= totalPage.value) {
        currentPageRef.value = pageNumber;
        emit("toPageNum", currentPageRef.value);
    }
}
</script>

<template>
    <div class="btn-group" role="group" aria-label="Basic example">
        <button
            type="button"
            class="btn btn-light text-nowrap"
            @click="firstPage"
        >
            首页
        </button>
        <button
            type="button"
            class="btn btn-light text-nowrap"
            @click="previewPage"
        >
            {{ prevText }}
        </button>
        <button
            v-for="page in tempPageNumbers"
            :key="page"
            type="button"
            class="btn btn-light"
            :class="{ active: page === currentPageRef }"
            @click="toPage(page)"
        >
            {{ page }}
        </button>
        <button
            type="button"
            class="btn btn-light text-nowrap"
            @click="nextPage"
        >
            {{ nextText }}
        </button>
        <button
            type="button"
            class="btn btn-light text-nowrap"
            @click="lastPage"
        >
            尾页
        </button>
    </div>
</template>

<style scoped>
.pages {
    display: inline-block;
    margin-bottom: 10px; /* 调整标签和摘要之间的间距 */
}
.page {
    display: inline-block;
    padding-right: 10pt;
}
.btn.active {
    background-color: #007bff;
    color: white;
}
</style>
